<template>
  <div>
    <div id="echart" style="height: 400px"  v-loading="loading"></div>
    <div>
      <el-button @click="tonewGet">新增确诊分布</el-button>
      <el-button @click="toFromfoe">境外输入</el-button>
      <el-button @click="toFromfoe2">累计确诊</el-button>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      timer: null,
      loading:true
    };
  },

  computed: {
    ...mapState("dataList", ["dataList"]),
  },
  created() {
    this.timer = setInterval(() => {
      this.findData();
    }, 2000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  methods: {
    ...mapActions("dataList", ["page_query"]),
    tonewGet(){
      this.$router.push({
          path: "/echarts/new",
        });
    },
    toFromfoe(){
      this.$router.push({
          path: "/echarts/from",
        });
    },
    toFromfoe2(){
      this.$router.push({
          path: "/echarts/from2",
        });
    },
    findData() {
      this.page_query({
        page: 1,
        pageSize: 10,
      }).then(() => {
        let res1 = this.dataList.list.map((item) => {
          return item.province;
        });
        //生成一个死亡人数的数组
        let res2 = this.dataList.list.map((item) => {
          return item.dead;
        });
        this.initEchart(res1, res2);
      });
    },
    initEchart(val1, val2) {
      echarts.init(document.getElementById("echart")).dispose();
      //初始化图标
      var myChart = echarts.init(document.getElementById("echart"));

      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: "category",
          data: val1,
          axisLabel: {
            formatter(val) {
              return val.split("").join("\n");
            },
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: val2,
            type: "line",
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
  div{
    position: relative;
  }
  div div:nth-child(2) {
    margin-top: 50px;
    left: 50%;
    margin-left: -300px;
  }
  div div .el-button {
    width: 200px;
  }
  div div .el-button:hover {
    background-color: #00bec7;;
    color: white;
  }
</style>